<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul >
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>
<div style="  margin: auto;
    width: 50%;
    border: 3px solid #73AD21;
    padding: 10px;
    text-align: center;
">come baby</div>

<div style="width: 100%;">
    <img style="margin:auto;display: block " src="../img/a.gif" alt="">
</div>
<div style="float: left">
    <img src="../img/b.gif" alt="">
</div>

<div style="height: 100px;width:100px;position: absolute;right: 0px;top:0px;border: solid red">右对齐</div>
<div style="height: 100px;width:100px;border: solid red;position: absolute;left: 0px;top:0px;">左对齐</div>
<div style="clear: both;width: 100%;height: 300px;border: solid green;overflow: auto">
    图像溢出
    <img src="../img/c.gif" alt="" style="float: right">

</div>
<div style="width: 100%;border: solid black;padding: 50px 0">垂直居中</div>
<div style="border: solid red;text-align: center;line-height: 100px">周杰伦在中间</div>
<div class="center">
    <p>transform我是水平和垂直居中的。</p>
</div>
<style>
    .center{
        position: relative;
        height: 100px;
        width: 100%;
        border: solid black;
    }
    .center p{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        margin:0;
    }
    ul li{
        display: inline;
    }
</style>
</body>
</html>
